<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        window.onload=function(){
           /* 
            当鼠标滚轮向下滚动时，box1边长

            当滚轮向下滚动时，box1变短
           */ 
          //获取id为box1的xdiv
          var box1=document.getElementById("box1");
          //为box1绑定一个鼠标滚轮的事件
          /* 
            onmousewheel鼠标滚轮滚动的世家，会在滚轮滚动时触发
            但是火狐不支持该属性

            在火狐中需要使用DOMMouseScroll来绑定滚轮事件
            注意该事件需要通过addEventListener()函数来绑定

          */
          box1.onmousewheel=function(event){
            event=event||window.event;
         /* 
            当鼠标滚轮向下滚动时，box1边长

            当滚轮向下滚动时，box1变短
         */ 
        //判断鼠标滚轮时向上滚还是向下滚,方向
        //event.wheelDelta可以获取鼠标滚轮滚动的方向
        //向上滚120向下滚 -120 我们不看大小,只看正负
        // alert(event.wheelDelta);
        //wheelDelta这个属性在火狐中不支持
        //在火狐中使用event.detail来获取滚动的方向
        //alert(event.detail)

        //判断鼠标滚轮的方向
        if(event.wheelDelta>0||event.detail<0){
            // alert("向上滚");
            box1.style.height=box1.clientHeight-10+"px";
        }
        else{
            // alert("向下滚");
            box1.style.height=box1.clientHeight+10+"px";
        }
        /* 
            使用addEventListener()方法绑定响应哈桉树，取消默认行为时不能使用return false
            需要使用event来取消默认行为
        */
       event.preventDefault&& event.preventDefault();

        /* 
            当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
            这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
        */
       return false;
        
            
          };
          //为火狐绑定事件
          bind(box1,"DOMMouseScroll",function(){
            alert("滚了");

          });
        };
        function bind(obj,eventStr,callback){
        if(obj.addEventListener){
        //大部分浏览器兼容的方式
        obj.addEventListener(eventStr,callback,false);
        }else{
            /* 
                this是谁由调用方式决定
                callback.call(obj)
            */
        //IE8及以下
        obj.attachEvent("on"+eventStr,function(){
            //在匿名函数中调用回调函数
            callback.call(obj);

        });
        }
    
    }
    </script>
</head>
<body>
    <div id="box1" style="height: 100px;"></div>
</body>
</html>